

<template>
    <div>
        <div class="grid md:grid-cols-4 gap-3 overflow-x-hidden">
 <el-card shadow="hover"  class="cursor-pointer" v-for="(n,index) of cards" :key="index">
    <template #header>
      <div class="flex justify-between items-center">
        {{n.title}}
        <el-tag type="danger" size="small" effect="dark" >月</el-tag>
        </div>
    </template>

    <section class="flex justify-between items-center gap-3">
        <span class="text-2xl">{{n.price}}</span>
          <i :class="n.icon" class="text-violet-700 text-[30px] " />
    </section>

       <section class=" text-base flex justify-between items-center mt-4">
      <span> {{n.totalTitle}} </span>
       <span class="" >{{n.total}}</span>
      </section>
  </el-card>
    </div>

    <div class=" p-3 bg-gray-100 mt-5 grid md:grid-cols-2 gap-3 ">    
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
            <template #header>
            <div>
                <span class="font-black">用户统计</span>
            </div>
            </template>
            <div id="echart1" class=" h-[300px] w-full "></div>
        </el-card>
          
            
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
            <template #header>
            <div>
                <span class="font-black">用户规划</span>
            </div>
            </template>
             <div id="echart2" class="h-[300px] w-full "></div>     
        </el-card>
          
          
    </div>
    </div>
</template>

<script setup lang="ts">
import {echart1, echart2} from "./echarts"
import { ref,nextTick,  onBeforeMount } from "vue";
import  * as echarts from "echarts"
import * as icons from "@icon-park/vue-next"
import router from "@/router";
interface ICard {
     title:string,
     price:number,
     icon:string,
     totalTitle:string,
     total:number
}

const cards = ref<ICard[]>([
    {
         title:"用户数",
         price:888,
  icon:"fas fa-users",
           totalTitle:"总人数",
         total:200
    },
    {
             title:"商品数",
         price:250,
         icon:"fas fa-shopping-cart",
         totalTitle:"剩余商品数量",
         total:200
    },
    {
             title:"流量人数",
         price:2500000,
         icon:"fas fa-broadcast-tower",
         totalTitle:"在线人数",
         total:200005
    },
    {
             title:"订单数",
         price:8889888,
         icon:"fas fa-barcode",
         totalTitle:"已处理订单数",
         total:200050
    }
])


nextTick(()=>{
echarts.init(document.getElementById('echart1') as HTMLDivElement).setOption(echart1);
echarts.init(document.getElementById('echart2') as HTMLDivElement).setOption(echart2);

})

</script>

<style scoped>

</style>